// 模糊搜索
const inp = document.querySelector('.search>.box>input')
const ul = document.querySelector('.search>.box>ul')

inp.oninput = function () {
  const text = this.value.trim()
  const script = document.createElement('script')
  script.src = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=34305,34099,33970,34273,34278,34004,34281,34107,34111,26350,22159&wd=${ text }&req=2&csor=2&cb=fn&_=1627023610785`
  document.body.appendChild(script)
  script.remove()
}
function fn(res) {
  if (!res.g) {
    ul.classList.remove('active')
    return
  }
  let str = ''
  res.g.forEach(item => {
    str += `<li>${ item.q }</li>`
  })
  ul.innerHTML = str
  ul.classList.add('active')
}



// 回到顶部
const myBtn = document.querySelector('.rigsid>span')
window.onscroll = function() {scrollFunction()};
 
function scrollFunction() {
    // console.log(121);
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop

    if (scrollTop >= 20) {
        document.getElementById("myBtn").style.display = "block";
        $('.menu').addClass('sticky');
    } else {
        document.getElementById("myBtn").style.display = "none";
        $('.menu').removeClass('sticky');
    }
}
 
// 点击按钮，返回顶部
// function topFunction() {
//     console(456);
//     document.body.scrollTop = 0;
//     document.documentElement.scrollTop = 0;
// }
myBtn.onclick = function () {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}







// 吸顶效果

// $(function(){
//   let offset_h = $('.header').offset()
//   let offset_b = $('.bigimg').offset()
//   let offset_s = $('.search').offset()
//   $(window).scroll(function () {
//     if ($(window).scrollTop() >= ( offset_h.top + offset_b.top + offset_s.top)) {
//       $('.menu').css({
//         position: fixed,
//         top: 0,
//         zIndex: 999,
//       })      
//     } 
//   })
// }
// )




















// 登录昵称信息切换
// // 根据你是否登录, 决定显示 div.on 还是显示 div.off

const onBox = document.querySelector('.info>.on')
const offBox = document.querySelector('.info>.off')
const nameBox = onBox.querySelector('.username')

const id = window.localStorage.getItem('id')

// 登录验证
testLogin()
function testLogin() {
  // 1. 怎么知道你是否登录过
  // 如果你的 localStorage 内有 login 信息, 并且值为 1, 表示你曾经登录过
  // 1-1. 获取到 localStorage 内的 login 信息
  const msg = window.localStorage.getItem('login')
  if (msg !== '1') {
    // 1-2. 证明你从来没有登录过
    offBox.classList.add('active')
    onBox.classList.remove('active')
    return
  }

  const token = window.localStorage.getItem('token')

  // 2. 你曾经登录过
  // 一天以前还是一个月以前, 不知道
  // 拿到 token 加密的 "凭证"
  // 利用这个 "凭证" 去请求一个需要 "凭证" 才能返回数据的接口
  // 因为本页面需要用到 用户的昵称, 所以就直接请求一个用户详细信息
  // 请求用户信息
  const xhr = new XMLHttpRequest()
  // 拿到 lcoalStorage 内的 id 信息
  xhr.open('GET', 'http://localhost:8888/users/info?id=' + id)
  xhr.onload = () => testHandler(xhr)
  // 请求之前设置一下请求头, 添加 authoriztion 设置 token 信息
  xhr.setRequestHeader('authorization', token)
  xhr.send()
}

function testHandler(xhr) {
  const res = JSON.parse(xhr.responseText)
  console.log(res)

  // 判断 res 内的 code 来决定使用哪一个标签
  if (res.code !== 1) {
    offBox.classList.add('active')
    onBox.classList.remove('active')
    return
  }

  // 表示你当前在登录有效期内
  // 把用户昵称写进去
  nameBox.innerText = res.info.nickname
  onBox.classList.add('active')
  offBox.classList.remove('active')
}

// 跳转页面
// const cartBtn = document.querySelector('.cart')
const logoutBtn = document.querySelector('.logout')
const selfBtn = document.querySelector('.self')
const listBtn = document.querySelector('.list')

// cartBtn.addEventListener('click', () => window.location.href = './cart.html')
selfBtn.addEventListener('click', () => window.location.href = '../views/self.html')
listBtn.addEventListener('click', () => window.location.href = '../views/list.html')
logoutBtn.addEventListener('click', () => {
  // 发送请求告诉服务器, 我再注销登录
  ajax({
    url: 'http://localhost:8888/users/logout',
    data: `id=${ id }`,
    dataType: 'json',
    success: function (res) {
      if (res.code === 1) window.location.reload()
    }
  })
})
